<template>
    <div class="houseDetail" >
         <!-- 导航栏开始 -->
        <div class="banner">
            <!-- 版心开始 -->
            <div class="container">
                <ul class="channelList">
                    <!-- <li @click="$router.go(-1)">返回</li> -->
                    <router-link to="/Home" tag="li">首页</router-link>
                    <li class="selected">二手房</li>
                    <router-link tag="li" to="/AnewHouse">新房</router-link>
                    <router-link to="/rental" tag="li">租房</router-link>
                    <router-link tag="li" to="/Office">写字楼</router-link>
                    <router-link tag="li" to="/village">小区</router-link>
                    <li>问答</li>
                    <li>工具</li>
                    <router-link tag="li" to="/release">发布房源</router-link>
                </ul>
                <!-- 导航栏右边 -->
                <div class="bannerRight">
                    <div class="login">
                        <i></i>
                        <span v-if="!userInfo">登录</span>
                        <span v-if="!userInfo">/</span>
                        <span v-if="!userInfo">注册</span>
                        <router-link to="/userInfo" tag="span" v-if="userInfo">{{userInfo}}</router-link>
                        <span v-if="userInfo">退出</span>
                    </div>
                    <div class="phone">
                        <i></i>
                        <span>热线电话1010-9000</span>
                    </div>
                    <div class="back" @click="$router.go(-1)">
                        <span>返回</span>
                    </div>
                </div>
            </div>
            <!-- 版心结束 -->
        </div>
        <!-- 头部开始 -->
        <div class="houseDetail-header">
            <div class="container">
                <!-- 菜单栏 -->
                <div class="meau">
                    <!-- 菜单栏左边部分 -->
                    <div class="meauLeft">
                        <router-link to="/secondHand" tag="div" class="logo" ></router-link>
                        <ul class="typeList">
                            <li class="selected">在售</li>
                            <li>成交</li>
                            <router-link tag="li" to="village">小区</router-link>
                            <li>地图找房</li>
                        </ul>
                    </div>
                    <!-- 菜单栏右边部分 -->
                    <div class="meauRight">
                        <!-- 搜索栏 -->
                        <div class="searcher">
                            <div class="input">
                                <input type="text" placeholder="请输入关键字搜索">
                                <div class="icon-seacher">
                                    <i></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="sellDetailHeader">
                    <div class="title-wrapper">
                        <div class="title" v-if="houseDetail">
                            <h1>{{houseDetail.title}}</h1>
                            <div class="sub">房子满五年唯一，低楼层户型好，近地铁，楼下生活配套齐全</div>
                        </div>

                        <div class="action" v-if="houseDetail" @click="fanFun">
                            <div class="btn" v-show="!houseDetail.fans">关注房源</div>
                            <div class="btn" v-show="houseDetail.fans">已关注房源</div>
                            <span>{{houseDetail.fan}}人关注</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 简介 -->
        <div class="intro">
            <!-- 左边的介绍 -->
            <div class="leftIntro">
                <span>广州房产网</span>
                <i>></i>
                <span>广州二手房</span>
                <i>></i>
                <span>当前房源</span>
            </div>
            <!-- 右边 -->
            <div class="rightIntro" v-if="houseDetail">
                <div class="compareBtn" @click="companerFun">
                    <i></i>
                    <span v-show="!houseDetail.companer">加入对比</span>
                    <span v-show="houseDetail.companer">已加入对比</span>
                </div>
                <div class="sharethis">
                    <i></i>
                    <span>分享此房源</span>
                </div>
            </div>
        </div>

        <!-- 内容概述 -->
        <div class="overview">
            <!-- 左边 图片内容 -->
            <div class="content-left">
                <!-- 放大镜开始 -->
                <div class="box" id="fdj" v-if="imgs">
                    <!-- 展示图片 -->
                    <div class="small" ref="small" @mouseover="show" @mouseout="hide" @mousemove="move">
                        <img :src="imgs[imgId]" alt="" >

                        <div class="mask" ref="mask"></div>
                    </div>

                    <!-- 右边放大镜的图片 -->
                    <div class="big" ref="big" v-if="imgs">
                        <img :src="imgs[imgId]" alt="" ref="bigImg">
                    </div>
                </div>
                <!-- 轮播图 -->
                <div class="thumbnail">
                    <div class="pre" @click="prev">&lt;</div>
                    <div class="next" @click="next">&gt;</div>
                    <div class="slider">
                        <ul ref="uls">
                            <li v-for="(item,index) in imgs" :key="index" :class="{'con':index == imgId}" @click="change(index)">
                                <img :src="item" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 右边 房屋信息 -->
            <div class="content-right" v-if="houseDetail">
                <!-- 价格 -->
                <div class="price-container">
                    <div class="price">
                        <span class="total">{{houseDetail.price}}</span>
                        <span class="unit">万</span>
                        <div class="text">
                            <span class="unitPrice">
                                <span>{{houseDetail.unitPrice}}</span>
                                <i>元/平方</i>
                            </span>
                            <span class="tax">
                                <span class="taxtext">首付及贷款情况请咨询经纪人</span>
                                <i></i>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 房屋信息 -->
                <div class="houseInfo" v-if="houseDetail">
                    <div class="room">
                        <div class="mianInfo">{{houseDetail.houseapartment}}{{houseDetail.houseapartmentS}}</div>
                        <div class="subInfo">{{houseDetail.floor}}/{{houseDetail.floorA}}</div>
                    </div>
                    <div class="type">
                        <div class="mianInfo">{{houseDetail.orientation}}</div>
                        <div class="subInfo">{{houseDetail.renovationA}}/{{houseDetail.renovation}}</div>
                    </div>
                    <div class="area">
                        <div class="mianInfo">{{houseDetail.square}}平米</div>
                        <div class="subInfo">{{houseDetail.buildingFinishYear}}/{{houseDetail.style}}</div>
                    </div>
                    <div class="haofangInfo">
                        <img src="https://img.ljcdn.com/beike/haofanglogo/1573111250229.png" alt="">
                        <span>诚心卖，省心买</span>
                    </div>
                </div>
                <!-- 地理信息  -->
                <div class="aroundInfo">
                    <div class="communityName">
                        <i>小区名称</i>
                        <span class="info">{{houseDetail.address}}</span>
                        <span class="map">地图</span>
                    </div>
                    <div class="areaName">
                        <i>所在区域</i>
                        <span class="info">{{houseDetail.addressNameA}}  {{houseDetail.addressName}}</span>
                        <span class="map">{{houseDetail.subway}}</span>
                    </div>
                    <div class="visitTime">
                        <i>看房时间</i>
                        <span class="info">有租户需预约</span>
                        <span class="map"></span>
                    </div>
                    <div class="houseRecord">
                        <i>链家编号</i>
                        <span class="info">10840374411600</span>
                        <span class="map">举报</span>
                    </div>
                    <div class="danger-layout">
                        <i>风险提示</i>
                        <span class="info">链家用户风险提示</span>
                    </div>
                    <div class="danger-layout">
                        <i>交易政策</i>
                        <span class="info">广州市房屋交易政策指引告知书</span>
                    </div>
                </div>
                <!-- 中介信息 -->
                <div class="ke-agent-container">
                    <div class="personInfo">
                        <div class="image">
                            <img src="https://img.ljcdn.com/usercenter/images/uc_ehr_avatar/b7b2217d-22f7-4df3-bb5c-6dce35039ef8.jpg.480x640.jpg" alt="">
                        </div>
                        <div class="personName">
                            <div class="toph">
                                <span class="name"> 郑春燕</span>
                                <span class="tag">德佑</span>
                                <span class="ig">
                                    <img src="../assets/image/person001.png" alt="">
                                </span>
                            </div>
                            <div class="topbottom">
                                <img src="https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/chatIconGreen.png" alt="">
                                <i>在线问</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中部导航栏 -->
        <div class="tab-wrap"  :style="[{'display':this.backIconsLength >= 500 ? 'block':'none'},{'opacity':this.backIconsLength >= this.baseInfo ? '1':'0'}]">
            <div class="wrap">
                <ul>
                    <li :class="{'selected':selectIndex == index}" v-for="(item,index) in itemList" :key="index" @click="scroll(index)">{{item}}</li>
                    <!-- <li :class="{'selected':selectIndex == 1}" @click="scroll">房源反馈</li>
                    <li :class="{'selected':selectIndex == 2}" @click="scroll">户型分间</li>
                    <li :class="{'selected':selectIndex == 3}" @click="scroll">房源照片</li> -->
                </ul>
            </div>
        </div>

        <!-- 房屋详细信息 -->
        <div class="m-content">
            <!-- 左边的盒子 -->
            <div class="box-l">
                <!-- 基本信息 -->
                <div class="baseinform" ref="baseInfo">
                    <h2 class="title">基本信息</h2>
                    <div class="introContent">
                        <!-- 基本属性 -->
                        <div class="base">
                            <!-- 基本属性 -->
                            <div class="name">基本属性</div>
                            <div class="content">
                               <ul>
                                    <li><span class="label">房屋户型</span>1室1厅1厨1卫</li>
                                    <li><span class="label">所在楼层</span>低楼层 (共8层)</li>
                                    <li><span class="label">建筑面积</span>40.6㎡</li>
                                    <li><span class="label">户型结构</span>平层</li>
                                    <li><span class="label">套内面积</span>35.7㎡</li>
                                    <li><span class="label">建筑类型</span>塔楼</li>
                                    <li><span class="label">房屋朝向</span>北</li>
                                    <li><span class="label">建筑结构</span>钢混结构</li>
                                    <li><span class="label">装修情况</span>简装</li>
                                    <li><span class="label">梯户比例</span>一梯十二户</li>
                                    <li><span class="label">配备电梯</span>无</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 交易属性 -->
                        <div class="transaction">
                            <div class="name">交易属性</div>
                            <div class="content">
                                <ul>
                                    <li class=""><span class="label ">挂牌时间</span><span>2022-09-17</span></li>
                                    <li class=""><span class="label ">交易权属</span><span>商品房</span></li>
                                    <li class=""><span class="label ">上次交易</span><span>2017-06-25</span></li>
                                    <li class=""><span class="label ">房屋用途</span><span>普通住宅</span></li>
                                    <li class=""><span class="label ">房屋年限</span><span>满五年</span></li>
                                    <li class=""><span class="label ">产权所属</span><span>非共有</span></li>
                                    <li><span class="label">抵押信息</span><span style="display:inline-block;width:64%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;" title="无抵押">无抵押</span></li>
                                    <li class=""><span class="label ">房本备件</span><span>已上传房本照片</span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="disclaimer">特别提示：本房源所示信息仅供参考，购房时请以该房屋档案登记信息、产权证信息以及所签订合同条款约定为准；本房源公示信息不做为合同条款，不具有合同约束力。</div>
                    </div>
                </div>
                <!-- 房源特色 -->
                <div class="baseinform" >
                    <h2 class="title" style="margin-top:50px">房源特色</h2>
                    <div class="showbasemore">
                        <!-- 标签 -->
                        <div class="tags">
                            <div class="name">房源标签</div>
                            <div class="content">
                                <span>地铁</span>
                                <span>VR看装修</span>
                                <span>房本满五年</span>
                            </div>
                        </div>
                        <!-- 基本信息 -->
                        <div class="baseattribute">
                            <div class="name">核心卖点</div>
                            <div class="content">房子满五年唯一，低楼层户型好，近地铁，楼下生活配套齐全</div>
                        </div>
                        <div class="baseattribute">
                            <div class="name">适宜人群</div>
                            <div class="content">这个房子一房一厅,空间大，适合家庭，情侣，老人，单身,刚需,人群</div>
                        </div>
                        <div class="baseattribute">
                            <div class="name">周边配套</div>
                            <div class="content">大石城、盒马鲜生、世纪华联、仓隆。菜市场：东联菜市场、东发新街市、大石菜市场。</div>
                        </div>
                        <div class="baseattribute">
                            <div class="name">交通出行</div>
                            <div class="content">广州地铁3号线大石站A出口，,公交车站：1、7、13、17、51、211、247、288、301、305、308、309、512、530、562等等</div>
                        </div>
                        <!-- 特别提示 -->
                        <div class="disclaimer">注：1.房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率、容积率等信息为通过物业介绍、房产证、实勘、政府官网等渠道获取，因时间、政策会发生变化，与实际情况可能略有偏差，房源介绍仅供参考。 2.房源介绍中与距离相关的数据均来源于百度地图。 3.土地使用起止年限详见业主土地证明材料或查询相关政府部门的登记文件。</div>
                    </div>
                </div>
                <!-- 房主自荐 -->
                <div class="newwrap" ref="info">
                    <div class="comment_look">
                        <!-- 头部 -->
                        <div class="look_header">
                            <h3>经纪人带看反馈</h3>
                            <div class="item">
                                <span>最新</span>
                            </div>
                        </div>
                        <!-- 详情 -->
                        <div class="look_content">
                            <div class="item">
                                <!-- 左边的图片 -->
                                <div class="image">
                                    <img src="https://img.ljcdn.com/usercenter/images/uc_ehr_avatar/b7b2217d-22f7-4df3-bb5c-6dce35039ef8.jpg.480x640.jpg" alt="">
                                </div>
                                <!-- 中间的 -->
                                <div class="middle">
                                    <div class="header-content">
                                        <!-- 头部 -->
                                        <span class="name">陈新运</span>
                                        <span class="logo"><img src="../assets/image/person001.png" alt=""></span>
                                        <span class="tag">住商</span>
                                        <span class="phone">4008893375转2166</span>
                                    </div>
                                    <!-- 描述 -->
                                    <div class="des">尊敬的客户您好，我是住商不动产的陈新运，本人带客户看过这套房子.熟悉小区周边配套环境，装修保养好.全屋光线通透.小区环境优美，绿化好，业主诚意出售，想了解更多优质房源请联系我。本人从业房地产行业多年，专业经纪人为您解答 ！</div>
                                    <!-- 代看记录 -->
                                    <div class="look_item_record">2022/10/22带客户看过此房，共带看本房1次</div>
                                </div>
                                <!-- 右边的按钮 -->
                                <div class="bottom">
                                    <div class="chat">
                                        <i></i>
                                        <span>咨询</span>
                                    </div>
                                    <div class="btn selected">
                                        <i class="dianzan"></i>
                                        <div>有用</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 户型分间 -->
                <div class="newwrap" ref="huxing">
                    <div class="layout-wrapper">
                        <div class="layout">
                            <!-- 头部 -->
                            <div class="title">
                                <h3>户型分间</h3>
                                <div class="detali">
                                    <div class="image"><img src="https://img.ljcdn.com/usercenter/images/uc_ehr_avatar/718bcd64-bf5a-448b-8ac7-ae88f7ab54b3.jpg.480x640.jpg" alt=""></div>
                                    <div class="infomation">
                                        <div class="name">梁建斌<span> 本房信息由我维护 </span></div>
                                        <div class="bottom">
                                            <div class="icon"></div>
                                            <div class="phone"> 4008893216-46141</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 内容 -->
                            <div class="content">
                                <div class="imgdiv">
                                    <img src="../assets/image/detail1.jpg" alt="">
                                </div>
                                <div class="des">
                                    <div class="info">
                                        <div class="list">
                                            <div class="infolist">
                                               <div id="infoList" >
                                                <div class="row">
                                                  <div class="col">客厅</div>
                                                  <div class="col">17.07平米</div>
                                                  <div class="col">北</div>
                                                  <div class="col">普通窗</div>
                                                </div>
                                                <div class="row">
                                                  <div class="col">卧室</div>
                                                  <div class="col">8.55平米</div>
                                                  <div class="col">北</div>
                                                  <div class="col">普通窗</div>
                                                </div>
                                                <div class="row">
                                                  <div class="col">厨房</div>
                                                  <div class="col">4.4平米</div>
                                                  <div class="col">北</div>
                                                  <div class="col">普通窗</div>
                                                </div>
                                                <div class="row">
                                                  <div class="col">卫生间</div>
                                                  <div class="col">1.64平米</div>
                                                  <div class="col">无</div>
                                                  <div class="col">无窗</div>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 附加内容 -->
                            <div class="disclaimer"> 注：户型图标注的面积不同于房本面积，存在测量误差，购房请以房本面积为准。</div>
                        </div>
                    </div>
                </div>
                <!-- 房源照片 -->
                <div class="newwrap" ref="image">
                    <div class="content-wrapper">
                        <!-- 标题信息 -->
                        <h3>
                            <div class="title">房源照片</div>
                        </h3>
                        <!-- 图片信息 -->
                        <div class="container">
                            <div class="list">
                                <div class="image">
                                    <img src="../assets/image/d1.jpg" alt="">
                                    <span class="name">客厅</span>
                                </div>
                                <div class="image">
                                    <img src="../assets/image/d2.jpg" alt="">
                                    <span class="name">客厅</span>
                                </div>
                                <div class="image">
                                    <img src="../assets/image/d3.jpg" alt="">
                                    <span class="name">卧室</span>
                                </div>
                                <div class="image">
                                    <img src="../assets/image/d4.jpg" alt="">
                                    <span class="name">户型图</span>
                                </div>
                                <div class="image">
                                    <img src="../assets/image/d5.jpg" alt="">
                                    <span class="name">厨房</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 房源简介 -->
                <div class="newwrap" >
                    <div class="resblockCardContainer">
                        <!-- 标题 -->
                        <div class="headerTop">
                            <h3>富丽家园百丰楼简介</h3>
                            <span>查看小区详情</span>
                        </div>
                        <!-- 内容 -->
                        <div class="content">
                            <div class="main">
                                <div class="main">
                                    <div class="info">
                                        <div class="name">小区均价</div>
                                        <span class="price"> 18073 元/㎡</span>
                                    </div>
                                    <div class="info">
                                        <div class="name">建筑年代</div>
                                        <span> 1995年</span>
                                    </div>
                                    <div class="info">
                                        <div class="name">建筑类型</div>
                                        <span> 塔楼</span>
                                    </div>
                                    <div class="info">
                                        <div class="name">楼栋总数</div>
                                        <span> 2栋</span>
                                    </div>
                                    <div class="info">
                                        <div class="name">户型总数</div>
                                        <span> 暂无数据</span>
                                    </div>
                                    <div class="info">
                                        <div class="name">挂牌房源</div>
                                        <span class="under">14套在售二手房</span>
                                        <span class="under">5套出租房源</span>
                                    </div>
                                </div>
                            </div>
                            <img src="../assets/image/b6.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边的盒子 -->
            <div class="box-r" ref="box-r" :style="[{'opacity':this.backIconsLength >= (this.baseInfo + 55) ? '1':'0',},{'display':this.backIconsLength >= 500 ? 'block':'none',}]" >
                <div class="title">
                    <span class="agent">联系经纪人</span>
                </div>
                <div class="showNode">
                    <div class="show-container">
                        <div class="image"><img src="https://img.ljcdn.com/usercenter/images/uc_ehr_avatar/18c189c7-0427-4f72-8180-d32c3915cf0b.jpg.480x640.jpg" alt=""></div>
                        <div class="middle">
                            <div class="info">
                                <span>邓李勇</span>
                                <i>住商</i>
                            </div>
                            <div class="des">好评经纪人</div>
                            <div class="phone">4008893250<span>转</span>7788</div>
                        </div>
                        <div class="bottom">在线问</div>
                    </div>
                </div>
                <div class="myfollow" @click="fanFun" v-if="houseDetail">
                    <span v-if="!houseDetail.fans">关注房源</span>
                    <span v-if="houseDetail.fans">已关注房源</span>
                </div>
                <div class="compareFixBtn" v-if="houseDetail">
                    <div class="compareIcon"></div>
                    <div class="compareText" @click="companerFun">
                        <span v-show="!houseDetail.companer">加入对比</span>
                        <span v-show="houseDetail.companer">已加入对比</span>
                    </div>
                </div>
                <div class="myline"></div>
            </div>
        </div>

         <!-- 新房推荐开始 -->
        <div class="newHousePush">
            <div class="container">
                <h3>同总价新房</h3>
                <ul>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            均价：
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            均价：
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            均价：
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            均价：
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            均价：
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import { getSecondHand } from "../api/secondHand.js"

    export default {
        name:"houseDetailView",
        data() {
            return {
                // 用户名
                userInfo:"",
                // 图片数据
                imgs:null,
                // 中部导航
                itemList:["房源信息介绍","房源反馈","户型分间","房源照片"],
                imgId:0,   //大图片下标
                backIconsLength:0,  //距离顶部屏幕滚动距离
                baseInfo:0,  //基本信息 距离屏幕顶部距离
                selectIndex:0,   //中部导航栏选中下标
                houseDetail:null,  //房子详情
                width:120,  //宽度
                heightList:[907,1927,2216,2592],  //高度
                companList:[],   //本地存储加入对比数组
                fanList:[],   //本地存储关注的数组
            }
        },
        methods:{
            // 轮播图右键
            next(){
                
                // let ul = $(this.$refs.uls);
                if(this.imgId == 2){
                    //     ul.animate({
                    //     "left":"-" + (this.imgId - 1)* 120 + "px"
                    // },500)
                    this.$refs.uls.style.left = "-" + (this.imgId - 1)* this.width + "px";
                }else if (this.imgId == this.imgs.length-1){
                    //  ul.animate({
                    //     "left":"-" + 0 + "px"
                    // },500)
                    this.$refs.uls.style.left = "-" + 0 + "px";
                }

                this.imgId = this.imgId == this.imgs.length-1?0:this.imgId+1
            },
            // 轮播图左键
            prev(){
                // let ul = $(this.$refs.uls);
                if(this.imgId == 3){
                    //     ul.animate({
                    //     "left":"-" + 0 + "px"
                    // },500)
                    this.$refs.uls.style.left = "-" + 0 + "px";
                }else if (this.imgId == 0){
                    //  ul.animate({
                    //     "left":"-" + 120 + "px"
                    // },500)
                     this.$refs.uls.style.left = "-" + this.width + "px";
                }
                this.imgId = this.imgId == 0?this.imgs.length-1:this.imgId-1;
            },
            // 显示放大镜盒子
            show(){
                let mask = this.$refs.mask;
                let big = this.$refs.big;
                mask.style.display = "block";
                big.style.display = "block";

            },
            // 隐藏放大镜盒子
            hide(){
                let mask = this.$refs.mask;
                let big = this.$refs.big;
                mask.style.display = "none";
                big.style.display = "none";
            },
            // 鼠标移动 放大镜
            move(event){
                let small = this.$refs.small;
                let mask = this.$refs.mask;
                let big = this.$refs.big;
                let bigImg = this.$refs.bigImg;
                // console.log(small.parentNode.offsetLeft);
                let x = event.pageX - small.parentNode.offsetLeft - mask.offsetWidth/2;
                let y = event.pageY - small.parentNode.offsetTop - mask.offsetHeight/2;

                // console.log(x,y);
                // small.parentNode.parentNode.parentNode.offsetLeft 最大盒子的左外边距
                // small.parentNode.parentNode.parentNode.offsetTop  最大盒子的上外边距
                // console.log(small.parentNode.offsetLeft,small.parentNode.offsetTop);

                // 设置黄色盒子规则
                if(x < 0){
                    x = 0;
                }else if(x > small.offsetWidth - mask.offsetWidth){
                    x = small.offsetWidth - mask.offsetWidth;
                }

                if(y < 0){
                    y = 0;
                }else if(y > small.offsetHeight - mask.offsetHeight){
                    y = small.offsetHeight - mask.offsetHeight;
                }

                // 黄色盒子设置移动位置
                mask.style.top =  y +"px";
                mask.style.left =  x +"px";

                // 大盒子中图片移动位置
                bigImg.style.left = - (bigImg.offsetWidth - big.offsetWidth) * x /(small.offsetWidth - mask.offsetWidth) + "px";
                bigImg.style.top = - (bigImg.offsetHeight - big.offsetHeight) * y /(small.offsetHeight - mask.offsetHeight) + "px";
            },
            // 点击切换图片
            change(index){
                this.imgId = index;
                let ul = $(this.$refs.uls);
                if(this.imgId == 3){
                     ul.animate({
                        "left":"-" + 120 + "px"
                    },500)
                }else if(this.imgId == 2){
                    ul.animate({
                        "left":"-" + 0 + "px"
                    },500)
                }
            },

            // 滚动距离 显示中部导航栏
            scrollFun(){
                window.onscroll = ()=>{

                this.backIconsLength = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;

                console.log(this.backIconsLength);
                // console.log(this.$refs.baseInfo.offsetTop);
                // console.log(this.$refs.baseInfo.parentNode.parentNode.offsetTop);
                // console.log($(this.$refs.baseInfo).offset().top);
                // this.baseInfo = this.$refs.baseInfo.offsetTop -100;
                this.baseInfo = 907 - 100;
                // console.log(this.$refs.baseInfo.offsetTop,this.$refs.info.offsetTop,this.$refs.huxing.offsetTop,this.$refs.image.offsetTop );
                // 对应盒子的距离屏幕的高度
                // let baseInfo = this.$refs.baseInfo.offsetTop - 55;
                // let info = this.$refs.info.offsetTop - 55;
                // let huxing = this.$refs.huxing.offsetTop - 55 ;
                // let image = this.$refs.image.offsetTop - 55;
                let baseInfo = this.heightList[0] - 55;
                let info = this.heightList[1] - 55;
                let huxing = this.heightList[2] - 55 ;
                let image = this.heightList[3] - 55;

                // 实现轮动效果
                if(baseInfo < this.backIconsLength && this.backIconsLength < info){
                    this.selectIndex = 0;
                }else if( info  <  this.backIconsLength && this.backIconsLength < huxing){
                    this.selectIndex = 1;
                }else if( huxing <  this.backIconsLength && this.backIconsLength < image){
                    this.selectIndex = 2
                }else{
                    this.selectIndex = 3;
                }
                
                }

            },
            // 滚动到具体位置
            scroll(index){
                let baseInfo = this.$refs.baseInfo.offsetTop - 55;
                let info = this.$refs.info.offsetTop - 55;
                let huxing = this.$refs.huxing.offsetTop - 55 ;
                let image = this.$refs.image.offsetTop - 55;
                
                console.log(index,"下标");
                
                // 判断对应下标
                if(index == 1){
                    this.selectIndex = 1;
                    window.scrollTo(0,info + 1 );
                }else if(index == 2){
                    this.selectIndex = 2;
                    window.scrollTo(0,huxing + 1);
                }else if(index == 3){
                    this.selectIndex = 3;
                    window.scrollTo(0,image + 1);
                }else if(index == 0){
                    this.selectIndex = 0; 
                    window.scrollTo(0,baseInfo + 1); 
                }

                // console.log(this.selectIndex,"选中下标");
            },
            // 加入对比
            companerFun(){
                if(!window.localStorage.getItem("token")){
                    this.$message.error({
                      message:"请登录后操作",
                      center:true
                    });
                    return;
                }
                let id = this.$route.query.id;   //获取传递路由参数

                if(!this.houseDetail.companer){
                    this.houseDetail.companer = true;
                    // 数组去重
                    let index = this.companList.findIndex(item => item == id);
                    // 没有的才要加入数组
                    if(index == -1){
                        this.companList.push(parseInt(id));
                        window.localStorage.setItem("companList",JSON.stringify(this.companList));
                    }

                }else if(this.houseDetail.companer){
                    this.houseDetail.companer = false;

                    let index = this.companList.findIndex(item => item == id);
                    // 删除
                    if(index != -1){
                        this.companList.splice(index,1);
                        window.localStorage.setItem("companList",JSON.stringify(this.companList));
                    }
                }
            },

            // 关注
            fanFun(){
                if(!window.localStorage.getItem("token")){
                    this.$message.error({
                      message:"请登录后操作",
                      center:true
                    });
                    return;
                }
                let id = this.$route.query.id;   //获取传递路由参数
                if(!this.houseDetail.fans){
                    console.log(id);
                    this.houseDetail.fans = true;

                    // 数组去重
                    let index = this.fanList.findIndex(item => item == id);
                    // 没有的才要加入数组
                    if(index == -1){
                        this.fanList.push(parseInt(id));
                        window.localStorage.setItem("fanList",JSON.stringify(this.fanList));
                    }
                   
                }else if(this.houseDetail.fans){
                        
                    this.houseDetail.fans = false;
                    let index = this.fanList.findIndex(item => item == id);
                    // 删除
                    if(index != -1){
                        this.fanList.splice(index,1);
                        window.localStorage.setItem("fanList",JSON.stringify(this.fanList));
                    }
                }
            },
            // 调用json数据方式
            getSecondHandFun(){
                getSecondHand().then(data =>{
                    // console.log(data);
                    // console.log(this.$route.query.id,"id");
                    let id = parseInt(this.$route.query.id);  //获取传递路由参数
                    let dataIndex = data.findIndex(item => item.id == id);  //寻找相同id
                    // console.log(dataIndex);
                    this.houseDetail = data[dataIndex];  //当前房屋信息
                    // console.log(this.houseDetail);
                    this.imgs = this.houseDetail.details;  //详情图片
                    // 初始化本地存储加入对比的数组
                    if(window.localStorage.getItem("companList")){
                        // 加入对比的数组
                        this.companList =  JSON.parse(window.localStorage.getItem("companList"));
                        console.log(this.companList);
                    }
                    // 判断是否存在于本地存储加入对比数组
                    let index = this.companList.findIndex(item => item == id);
                    if(index != -1){
                        this.houseDetail.companer = true;
                        console.log(this.houseDetail);
                    }


                    // 初始化本地存储关注的数组
                    if(window.localStorage.getItem("fanList")){
                        // 关注数组
                        this.fanList = JSON.parse(window.localStorage.getItem("fanList"));

                    }
                    // 判断是否存在于本地存储关注数组
                    let index2 = this.fanList.findIndex(item => item == id);
                    if(index2 != -1){
                        this.houseDetail.fans = true;
                    }
                })
            }

        },
        created(){
            // 调用json数据方法
            this.getSecondHandFun();
             // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
            
            
        },
        mounted(){
            // 页面数据挂载完成
            // this.$nextTick(()=>{
                
            // })
            // this.scrollFun();
            // this.scroll();
        },
        updated(){
            this.scrollFun();
        },
        
    }
</script>

<style lang="scss" scoped>
.houseDetail{
    position: relative;
    .banner{
        width: 100%;
        height: 38px;
        background-color: #394043;
        .container{
            display: flex;
            justify-content: space-between;
             .channelList{
                display: flex;
                align-items: center;
                height: 38px;
                // width: 500px;
                li{
                    font-size: 12px;
                    color: #a9abab;
                    margin-right: 21.5px;
                    cursor: pointer;
                    &:hover{
                        color: #fff;
                    }
                    &.selected{
                        color: #fff;
                    }

                    // &:first-child{
                    //     color: #fff;
                    //     margin-right: 30px;
                    // }
                }
            }
            .bannerRight{
                display: flex;
                align-items: center;
                .phone{
                    display: flex;
                    align-items: center;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -495px -220px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                    }
                }
                .login{
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    cursor: pointer;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -554px -173px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                        margin-right: 5px;
                    }
                }

                .back{
                    span{
                        border: 1px solid #fff;
                        font-size: 12px;
                        margin-left: 20px;
                        color: #fff;
                        padding: 1px 5px;
                        cursor: pointer;
                    }
                }
            }
        }
       
    }

    .houseDetail-header{
        // height: 98px;
        padding: 30px 0 0px 0;
        background: #f5f5f6;
        .meau{
            display: flex;
            justify-content: space-between;
            height: 45px;
            .meauLeft{
                height: 45px;
                width: 997px;
                display: flex;
                align-items: center;
                .logo{
                    width: 103px;
                    height: 36px;
                    // background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -120px -284px;
                    background: url("../assets/image/logo1.png") no-repeat 0 0;
                    background-size: 100% 100%;
                    vertical-align: middle;
                    margin-top:-6px;
                }
                .typeList{
                    display: flex;
                    margin-left:34px;
                    align-items: center;
                    height: 45px;
                    li{
                        font-size: 16px;
                        line-height: 43px;
                        color: #333;
                        margin-right: 30px;
                        cursor: pointer;
                        &.selected{
                            color: #00ae66;
                        }
                    }
                }
            }
            .meauRight{
                display: flex;
                align-items: center;
                height: 45px;
                .searcher{
                    .input{
                        height: 45px;
                        width: 345px;
                        position: relative;
                        input{
                            border: none;
                            outline: none;
                            padding: 0 22px;
                            box-sizing: border-box;
                            height: 45px;
                            width: 345px;
                             /* 阴影 */
                            box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
                            background: #ebeced;

                            &::-webkit-input-placeholder{
                                color: #757575;
                            }
                        }
                        .icon-seacher{
                            position: absolute;
                            top: 0;
                            right: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 50px;
                            height: 45px;

                            i{
                                width: 17px;
                                height: 17px;
                                background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -589px -96px;

                            }
                        }
                    }
                }       
            }
        }

        .sellDetailHeader{
            padding: 37px 0 26px;
            background-color: #f5f5f6;

            .title-wrapper{
                width: 1150px;
                display: flex;
                justify-content: space-between;
                .title{

                    h1{
                        max-width: 790px;
                        line-height: 29px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 26px;
                        color: #333333;
                        font-weight: bold;
                    }

                    .sub{
                        max-width: 790px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: 15px;
                        font-size: 14px;
                        color: #aaaaaa;
                        line-height: 1.2;
                    }
                }

                .action{
                    text-align: center;
                    color: #b0b3b4;
                    font-size: 12px;
                    margin-left: 20px;
                    display: flex;
                    flex-direction: column;
                    .btn{
                        line-height: 45px;
                        width: 113px;
                        height: 45px;
                        background-color: #ffffff;
                        border-radius: 2px;
                        color: #394043;
                        font-size: 14px;
                        text-align: center;
                        cursor: pointer;
                        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
                    }

                    span{
                        margin-top: 10px;

                    }
                }
            }
        }       

    }

    .intro{

        width: 1150px;
        height: 67px;
        line-height: 66px;
        background: #ffffff;
        border-top: 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftIntro{
            font-size: 12px;
            span{
                color: #aaaaaa;
            }
            i{
                color: #999999;
                margin: 0 10px;
                font-family: simsun;
            }
        }

        .rightIntro{
            display: flex;
            .compareBtn{
                display: flex;
                align-items: center;
                margin-right: 10px;
                cursor: pointer;
                i{
                    margin-right: 6px;
                    background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684);
                    background-position: -582px -185px;
                    width: 13px;
                    height: 13px;
                }
                span{
                    color: #394043;
                    font-size: 12px;
                }

                &:hover{
                    span{
                        text-decoration: underline;
                    }
                }
            }
            .sharethis{

                display: flex;
                align-items: center;
                cursor: pointer;
                i{
                    margin-right: 10px;
                    background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684);
                    background-position: -530px -173px;
                    width: 12px;
                    height: 12px
                }
                span{
                    color: #394043;
                    font-size: 12px;
                }

                &:hover{
                    span{
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .overview{
        width: 1150px;
        background-color: #fff;
        margin: 0 auto;
        // position: relative;
        display: flex;
        justify-content: space-between;

        .content-left{
            width: 710px;
            cursor: pointer;
            // 放大镜
            .box{
                width: 710px;
                height: 400px;
                margin-bottom: 8px;

                display: flex;
                position: relative;

                .small{
                    width: 710px;
                    height: 400px;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 710px;
                    }

                    // 放大镜
                    .mask{
                        background: rgba($color: #00ae66, $alpha: 0.4);
                        border:1px solid #00ae66;
                        width: 219px;
                        height: 245px;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        cursor: move;
                        display: none;
                    }
                }

                .big{
                    width: 438px;
                    height: 488px;
                    position: absolute;
                    top: 0;
                    left: 720px;
                    // border: 1px solid #ccc;
                    box-shadow: 1px 1px 10px 6px #ccc;
                    overflow: hidden;
                    display: none;
                    img{
                        position: absolute;
                        top: 0px ;
                        left: 0px;
                        height: 488px;
                    }
                }

            }

            // 轮播图
            .thumbnail{
                position: relative;
                margin-top: 8px;
                width: 710px;
                height: 82px;
                // 左箭头
                .pre{
                    position: absolute;
                    top: 0;
                    left: 0;
                    line-height: 82px;
                    width: 30px;
                    text-align: center;
                    font-size: 20px;
                    color: #cac9c9;
                    opacity: .8;
                    background-color: #000;
                    user-select: none;
                }
                // 右箭头
                .next{
                    position: absolute;
                    top: 0;
                    right: 0;
                    line-height: 82px;
                    width: 30px;
                    text-align: center;
                    background-color: #000;
                    font-size: 20px;
                    color: #cac9c9;
                    opacity: .8;
                }
                // 轮播图
                .slider{
                    overflow: hidden;
                    position: relative;
                    margin-left: 31px;
                    height: 82px;
                    width: 648px;
                    ul{
                        width:768px;
                        height: 82px;
                        position: absolute;
                        left: 0;
                        transition:all 0.5s linear;
                        li{
                            width: 120px;
                            height: 82px;
                            margin-left: 8px;
                            float: left;
                            opacity: 0.5;
                            img{
                                width: 100%;
                                height: 100%;
                                // opacity: 0.6;
                            }
                            
                            &:hover{
                                opacity: 1;
                            }
                            &.con{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        .content-right{
            width: 400px;
            line-height: 1;

            .price-container{
                display: flex;
                align-items: flex-end;
                .price{
                    display: flex;
                    align-items: flex-end;
                    .total{
                        display: inline-block;
                        font-family: Tahoma;
                        font-size: 46px;
                        line-height: 46px;
                        color: #e4393c;
                        font-weight: bold;
                        letter-spacing: -1px;
                        max-width: 180px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-right: 2px;
                    }
                    .unit{
                        font-size: 16px;
                        color: #e4393c;
                        // height: 37px;
                        line-height: 25px;
                        vertical-align: 6px;
                    }
                    .text{
                        font-size: 12px;
                        color: #333333;
                        display: inline-block;
                        margin-left: 15px;
                        vertical-align: 6px;
                        display: flex;
                        flex-direction: column;

                        .unitPrice{
                            
                            span{
                                font-size: 16px;
                                font-weight: bold;
                                color: #394043;
                                white-space: nowrap;
                            }
                            i{
                                color: #394043;
                                white-space: nowrap;
                                font-size: 16px;
                            }
                        }

                        .tax{
                            margin-top: 11px;
                            color: #394043;
                            font-size: 12px;
                            .taxtext{
                                max-width: 210px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                vertical-align: middle;
                            }
                            i{
                                width: 16px;
                                height: 16px;
                                display: inline-block;
                                vertical-align: middle;
                                background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/chatIconGreen.png);
                                background-size: cover;
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }

            .houseInfo{
                box-sizing: border-box;
                margin-top: 22px;
                width: 100%;
                border-top: 1px solid #eeeeee;
                border-bottom: 1px solid #eeeeee;
                padding: 30px 0;
                display: flex;
                flex-wrap: wrap;

                .room,.type,.area{
                    width: 33.33%;
                    display: flex;
                    flex-direction: column;
                    .mianInfo{
                        font-size: 20px;
                        font-weight: bold;
                        color: #333333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .subInfo{
                        margin-top: 8px;
                        font-size: 12px;
                        color: #394043;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .haofangInfo{
                    width: 100%;
                    margin-top: 16px;
                    display: flex;
                    height: 30px;
                    background: #f8f8f8;
                    line-height: 30px;
                    font-size: 13px;
                    color: #222;
                    img{
                        height: 30px;
                        width: 70px;
                        margin-right: 10px;
                        border-radius: 3px;
                        overflow: hidden;
                    }
                }
            }

            .aroundInfo{
                padding: 24px 0;
                line-height: 18px;
                border-bottom: 1px solid #eeeeee;
                font-size: 14px;

                .communityName{
                    line-height: 18px;
                    font-size: 14px;

                    i{
                        color: #aeb0b1;
                        margin-right: 24px;
                    }
                    .info{
                        text-decoration: underline;
                        color: #333333;
                    }
                    .map{
                        color: #394043;
                        margin-left: 14px;
                    }
                }
                .areaName,.visitTime,.houseRecord{
                    margin-top: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 18px;
                    font-size: 14px;

                    i{
                        color: #aeb0b1;
                        margin-right: 24px;
                    }
                    .info{
                        white-space: pre-wrap;
                        color: #333333;
                    }
                    .map{
                        color: #394043;
                        margin-left: 14px;
                    }
                }
                .danger-layout{
                    margin-top: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 18px;
                    font-size: 14px;

                    i{
                        color: #aeb0b1;
                        margin-right: 24px;
                    }
                    .info{
                        font-family: PingFangSC-Regular;
                        font-size: 14px;
                        color: #3072F6;
                        letter-spacing: 0;
                        text-decoration: underline;
                    }
                }

            }

            .ke-agent-container{
                padding-top: 19px;
                width: 400px;
                .personInfo{
                    display: flex;
                    justify-content: space-between;
                    .image{
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                    .personName{
                        width: 300px;
                        margin-top: 6px;
                        line-height: 1;
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        .toph{
                            .name{
                                font-size: 18px;
                                font-weight: 700;
                                color: #101d37;
                                margin-right: 8px;
                                max-width: 140px;
                                white-space: nowrap;
                                overflow: hidden;
                                -o-text-overflow: ellipsis;
                                text-overflow: ellipsis;
                                line-height: 20px;
                                cursor: pointer;
                            }
                            .tag{
                                background-color: #f4f7f9;
                                color: #849aae;
                                height: 18px;
                                line-height: 18px;
                                padding: 0 4px;
                                border-radius: 2px;
                                max-width: 100px;
                                font-size: 12px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .ig{
                                margin: 0 5px;
                                cursor: pointer;
                                width: 24px;
                                height: 18px;
                                background: #f5f5f6;
                                img{
                                    width: 24px;
                                }
                            }
                        }

                        .topbottom{
                            margin-top: 15px;
                            width: 118px;
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            float: right;
                            background: #f6f9f8;
                            border: 1px solid #00AE66;
                            border-radius: 2px;
                            font-size: 14px;
                            color: #00AE66;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                           img{
                            width: 16px;
                            height: 16px;
                            margin-right: 8px;
                           }
                           
                        }
                        
                    }
                }
            }
        }
    }
    // 中部导航栏
    .tab-wrap{
        // display: none;
        opacity: 0;
        background: #394043;
        width: 100%;
        height: 55px;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        right: 0;
        background: #394043;
        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
        transition: all 0.8s linear;
        .wrap{
            width: 1150px;
            margin: 0 auto;
            height: 55px;
            ul{
                display: flex;
                height: 55px;
                align-items: center;

                li{
                    height: 100%;
                    line-height: 55px;
                    text-align: center;
                    margin-right: 45px;
                    transition: color 0.3s linear;
                    color: #a9abab;
                    cursor: pointer;
                    &.selected{
                        color: #fff;
                    }
                }
            }
        }
    }
    .m-content{
        width: 1150px;
        margin: 0 auto;
        padding-top: 55px;
        display: flex;
        justify-content: space-between;
        // position: relative;

        .box-l{
            width: 710px;

            .baseinform{
                .title{
                    margin-bottom: 25px;
                    font-weight: bold;
                    font-size: 23px;
                    line-height: 23px;
                }
                .introContent{
                    .base,.transaction{
                        width: 710px;
                        vertical-align: top;
                        border-top: 1px solid #eeeeee;
                        border-bottom: 1px solid #eeeeee;
                        line-height: 22px;
                        padding: 20px 0;
                        display: flex;
                        .name{
                            width: 188px;
                            text-align: left;
                            color: #999999;
                            line-height: 23px;
                            font-size: 14px;
                        }
                        .content{
                            width: 522px;
                            ul{
                                width: 100%;
                                color: #394043;
                                display: flex;
                                flex-wrap: wrap;
                                li{
                                    width: 50%;
                                    line-height: 24px;
                                    font-size: 14px;
                                    color: #394043;
                                    white-space: nowrap;

                                    span{
                                        color: #999999;
                                        margin-right: 30px
                                    }
                                }
                            }
                        }
                    }
                    .transactio{
                        border: none;
                    }
                    .disclaimer{
                        padding-top: 10px;
                        color: #b0b3b4;
                        font-size: 12px;
                        line-height: 1.5;
                    }
                }
                .showbasemore{
                    // 标签
                    .tags{
                        width: 710px;
                        padding: 20px 0;
                        border-top: 1px solid #eeeeee;
                        display: flex;
                        .name{
                            width: 188px;
                            text-align: left;
                            color: #999999;
                            line-height: 23px;
                            font-size: 14px;
                        }
                        .content{
                            width: 522px;
                            span{
                                display: inline-block;
                                padding: 5px 9px;
                                background-color: #f4f7f9;
                                color: #849aae;
                                margin-right: 5px;
                                font-size: 14px;
                            }
                        }
                    }
                    // 基本信息
                    .baseattribute{
                        border-top: 1px solid #eeeeee;
                        display: flex;
                        width: 710px;
                        padding: 20px 0;
                        .name{
                            width: 188px;
                            text-align: left;
                            color: #999999;
                            line-height: 23px;
                            font-size: 14px;
                        }
                        .content{
                            line-height: 25px;
                            width: 522px;
                            color: #394043;
                            font-size: 14px;
                            white-space: pre-wrap;
                        }
                    }
                    // 特别提示
                    .disclaimer{
                        color: #b0b3b4;
                        font-size: 12px;
                        line-height: 1.5;
                    }
                }
            }
            .newwrap{
                margin-top: 70px;
                .comment_look{
                    width: 710px;
                    line-height: 1;

                    .look_header{
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        padding-bottom: 24px;
                        border-bottom: 1px solid #eeeeee;
                        h3{
                            color: #394043;
                            font-size: 23px;
                            font-weight: bold;
                        }
                        .item{

                            span{
                                font-size: 14px;
                                color: #394043;
                                padding: 0 8px;
                                cursor: pointer
                            }
                        }
                    } 
                    .look_content{
                        width: 710px;

                        .item{
                            width: 710px;
                            padding-top:20px;
                            display: flex;
                            justify-content: space-between;

                            .image{
                              width: 55px;      
                              height: 55px;
                              border-radius: 50%;
                              overflow: hidden;
                              img{
                                width: 100%;
                              }
                            }
                            .middle{
                                width: 523px;
                                // margin-left: 5px;
                                display: flex;
                                flex-direction: column;
                                .header-content{
                                    display: flex;
                                    height: 19px;
                                    align-items: center;
                                    .name{
                                        font-weight: bold;
                                        font-size: 14px;
                                        color: #394043;
                                        margin-right: 3px;
                                    }
                                    .logo{
                                        width: 24px;
                                        height: 18px;
                                        border-radius: 2px;
                                        overflow: hidden;
                                        margin-right: 3px;
                                        img{
                                            width: 24px;

                                        }
                                    }
                                    .tag{
                                        background: #eff0f2;
                                        color:#9399a5;
                                        max-width: 52px;
                                        height: 17px;
                                        line-height: 17px;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        border-radius: 2px;
                                        font-size: 12px;
                                        margin-left: 4px;
                                        margin-right: 2px;
                                        padding:  0 3px;
                                    }
                                    .phone{
                                        font-family: Tahoma;
                                        font-size: 14px;
                                        color: #EB4D3A;
                                        font-weight: bold;
                                        vertical-align: middle;
                                    }
                                }
                                .des{
                                    color: #394043;
                                    font-size: 14px;
                                    line-height: 25px;
                                    margin: 13px 0;
                                }
                                .look_item_record{
                                    color: #b0b3b4;
                                    font-size: 12px;
                                    margin-bottom: 19px;
                                }
                            }

                            .bottom{
                                width: 80px;
                                height: 127px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                align-items: flex-end;

                                .chat{
                                    height: 34px;
                                    line-height: 32px;
                                    border: 1px solid #00AE66;
                                    border-radius: 2px;
                                    padding: 0 12px;
                                    cursor: pointer;
                                    box-sizing: border-box;
                                    display: flex;
                                    align-items: center;
                                    i{
                                        width: 16px;
                                        height: 16px;
                                        display: inline-block;
                                        vertical-align: middle;
                                        background-image: url(	https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/chatIconGreen.png);
                                        background-size: cover;
                                        margin-right: 5px;
                                    }
                                    span{
                                        font-size: 14px;
                                        color: #00AE66;
                                        letter-spacing: 0;
                                    }
                                }
                                .btn{
                                    height: 20px;
                                    display: flex;
                                    align-items: flex-end;
                                    
                                    .dianzan{
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/useable.png);
                                        background-size: cover;
                                        vertical-align: middle;
                                        margin-right: 10px;
                                    }

                                    div{
                                        color: #888c8e;
                                        font-size: 14px;
                                        cursor: pointer;
                                        margin-bottom: 2px;
                                    }

                                    &.selected{
                                        .dianzan{
                                            background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/useableGreen.png);
                                        }
                                        div{
                                            color: #00AE66;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .layout-wrapper{
                    width: 710px;
                    margin-top: 15px;
                    line-height: 1;

                    .layout{
                        margin: 0 auto;
                        font-size: 22px;
                        color: #333;
                        display: flex;
                        flex-direction: column;
                        .title{
                            display: flex;
                            width: 710px;
                            align-items: center;
                            height: 40px;
                            h3{
                                font-size: 23px;
                                font-weight: bold;
                                line-height: 23px;
                                // margin-bottom: 25px;
                                height: 23px;

                            }

                            .detali{
                                height: 40px;
                                display: flex;
                                margin-left: 20px;
                                .image{
                                    width:40px ;
                                    height: 40px;
                                    border-radius: 50%;
                                    overflow: hidden;
                                    margin-right: 10px;

                                    img{
                                        width: 100%;
                                    }
                                }
                                .infomation{
                                    display: flex;
                                    flex-direction: column;
                                    
                                    .name{
                                        color: #333;
                                        font-size: 12px;
                                        text-decoration: none;
                                        outline: none;
                                        display: inline-block;
                                        line-height: 20px;
                                        font-weight: 700;
                                        span{
                                            margin-left: 5px;
                                            color: #aaa;
                                            font-size: 12px;
                                            display: inline-block;
                                            line-height: 20px;
                                        }
                                    }
                                   .bottom{
                                    margin-top: 5px;
                                    display: flex;
                                    
                                    .icon{
                                        background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite@2x.png?t=1551236311684);
                                        background-size: 606px 356px;
                                        background-position: -469px -173px;
                                        width: 13px;
                                        height: 12px;
                                        vertical-align: -1px;
                                        margin-right: 5px;
                                    }
                                    .phone{
                                        font-size: 12px;
                                        color: #fe615a;
                                        margin: 0;
                                        display: inline-block;
                                        font-weight: 500;
                                    }
                                   }
                                }
                            }
                        }

                        .content{
                            width: 710px;
                            margin: 33px 0;
                            display: flex;

                            .imgdiv{
                                width: 240px;
                                height: 180px;
                                img{
                                    width: 100%;
                                }
                            }

                            .des{
                                vertical-align: middle;
                                display: inline-block;
                                width: 370px;
                                margin-top: -6px;
                                margin-left: 70px;
                                padding-right: 20px;
                                height: 188px;
                                overflow-y: scroll;
                                line-height: 25px;

                                .info{
                                    .list{
                                        overflow: hidden;

                                        .infolist{
                                            transform:translate3d(0px, 0px, 0px);
                                            .row{

                                                .col{
                                                    display: inline-block;
                                                    width: 25%;
                                                    line-height: 30px;
                                                    font-size: 14px;
                                                    
                                                    &:first-child{
                                                        font-weight: bold;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .disclaimer{
                            clear: both;
                            color: #b0b3b4;
                            font-size: 12px;
                            line-height: 1.5;
                        }
                    }
                }
                
                .content-wrapper{
                    h3{
                        .title{
                            margin-bottom: 25px;
                            font-weight: bold;
                            font-size: 23px;
                            line-height: 23px;
                        }
                    }
                    .container{
                        max-height: 1136px;
                        overflow: hidden;

                        .list{
                            // margin: 0 auto;
                            margin-top: 15px;
                            width: 710px;
                            text-align: justify;
                            line-height: 0;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;

                            .image{
                                margin-bottom: 10px;
                                width: 350px;
                                height: 230px;
                                display: inline-block;
                                text-align: center;
                                position: relative;

                                &:first-child{
                                    width: 710px;
                                    height: 400px;
                                }
                                img{
                                    width: 100%;
                                    height: 100%;
                                }

                                .name{
                                    display: inline-block;
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    line-height: 32px;
                                    text-align: center;
                                    padding: 0 11px;
                                    border-radius: 2px;
                                    background-color: rgba(0,0,0,0.4);
                                    color: #ffffff;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
                .resblockCardContainer{
                    width: 710px;
                    
                    .headerTop{
                        width: 710px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        h3{
                            font-weight: bold;
                            font-size: 23px;
                            color: #394043;
                        }
                        span{
                            font-size: 14px;
                            line-height: 23px;
                            color: #7f8183;
                        }
                    }

                    .content{
                        width: 710px;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 23px;

                        .main{
                            width: 459px;
                            .info{
                                margin-top: 13px;
                                font-size: 14px;
                                display: flex;
                                .name{
                                    color: #7f8183;
                                    font-size: 14px;
                                    line-height: 1;
                                }
                                span{
                                    margin-left: 24px;
                                    color: #394043;
                                    font-size: 14px;
                                    white-space: pre-wrap;
                                }
                                .price{
                                    color: #db4c3f;
                                    font-weight: 700;
                                }
                                .under{
                                    text-decoration: underline;
                                }
                            }
                        }
                        img{
                            width: 199px;
                            height: 150px;
                            margin-top: 13px;
                        }
                    }
                }

            }
        }
        
        .box-r{
            transition: all 0.5s linear;
            margin: 0 auto;
            width: 380px;
            position: fixed;
            margin-top: 10px;
            // right: 0;
            top: 55px;
            bottom: auto;
            margin-bottom: 15px;
            background-color: #fff;
            z-index: 100;
            transform: translateX(770px);
            .title{
                padding-bottom: 12px;
                font-size: 14px;
                color: #101d37;
                font-weight: 700;

                .agent{
                    padding-bottom: 12px;
                    font-size: 14px;
                    color: #101d37;
                    font-weight: 700;
                }
            }
            .showNode{
                width: 100%;
                .show-container{
                    padding: 23px 0 28px;
                    border-top: 1px solid #f1f1f1;
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;

                    .image{
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                    .middle{
                        margin-left: 18px;
                        
                        .info{
                            display: flex;
                            align-items: center;
                            height: 28px;

                            span{
                                font-size: 14px;
                                font-weight: 700;
                                color: #101d37;
                                margin-right: 3px;
                                max-width: 120px;
                                display: inline-block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                line-height: 28px;
                                cursor: pointer;
                            }
                            i{
                                background-color: #f4f7f9;
                                color: #849aae;
                                height: 16px;
                                line-height: 16px;
                                display: inline-block;
                                padding: 0 4px;
                                margin-left: 6px;
                                border-radius: 2px;
                                font-size: 12px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                max-width: 100px;
                            }
                        }
                        .des{
                            font-size: 12px;
                            vertical-align: middle;
                            color: #9399a5;
                            overflow: hidden;
                            white-space: nowrap;
                            line-height: 17px;
                            margin-top: 3px;
                        }
                        .phone{
                            margin-top: 3px;
                            font-size: 16px;
                            line-height: 22px;
                            font-weight: 700;
                            color: #fe615a;
                            span{
                                margin: 0 6px;
                                font-size: 12px;
                                line-height: 17px;
                            }
                        }
                    }
                    .bottom{
                        background: #00ae66;
                        color: #fff;
                        border: 1px solid #00ae66;
                        width: 78px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        border-radius: 2px;
                        font-size: 12px;
                        cursor: pointer;
                        margin-left: 25px;
                        margin-bottom: 28px;
                    }
                }
            }

            .myfollow{
                margin-top: 25px;
                border-radius: 2px;
                border: 1px solid #d9dcde;
                width: 100%;
                height: 43px;
                line-height: 43px;
                font-weight: bold;
                text-align: center;
                color: #394043;
                font-size: 14px;
                cursor: pointer;
            }
            .compareFixBtn{
                width: 90px;
                margin: 25px auto 0;
                cursor: pointer;

                .compareIcon{
                    display: inline-block;
                    margin-right: 6px;
                    background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684);
                    background-position: -582px -185px;
                    width: 13px;
                    height: 13px;
                }
                .compareText{
                    vertical-align: top;
                    color: #394043;
                    font-size: 12px;
                    display: inline-block;
                }
                
            }
            .myline{
                width: 100%;
                height: 1px;
                background-color: #f1f1f1;
                margin-top: 35px;
                margin-bottom: 18px;
            }
        }
    }

    // 好价房推荐
    .newHousePush{
        line-height: 1;
        background: #fff;
        h3{
            font-size: 24px;
            padding-top: 70px;
            font-weight: bold;
            color: #394043;
        }
        ul{
            display: flex;
            margin-top: 32px;
            padding-bottom: 46px;
            white-space: nowrap;
            overflow: hidden;
            li{
                width: 218px;
                height: 170px;
                margin-right: 10px;
                .image{
                    width: 218px;
                    height: 150px;
                    position: relative;
                    img{
                        width: 100%;
                    }
                    .description{
                        position: absolute;
                        top:0;
                        width: 100%;
                        text-align: center;
                        line-height: 150px;
                        color: #fff;
                        font-weight: 700;
                        text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
                        font-size: 14px;

                    }
                }
                .price{
                    padding-top: 8px;
                    font-size: 12px;
                    line-height: 1;
                    font-weight: 700;
                    i{
                        font-weight: 700;
                        color: #db4c3f;

                    }
                }
            }
        }
    }
}
</style>